<!DOCTYPE html>
<html>
<head>
    <title>Web Notifications浏览器桌面通知</title>
    <meta charset="utf-8">
</head>
<body>
    <button onclick="send_notify('桌面推送', '这是我的第一条桌面推送')">通知</button>
</body>
<script type="text/javascript">
    // 通知方法
    function send_notify( the_title , the_body){
        notify.send(the_title, the_body, 'pic.jpg', thecall);
    }
    // 回调函数
    function thecall(){
        alert(123);
    }
    // 浏览器桌面通知功能
    var notify = {
        init: function (){
            if (window.Notification) {
                var ua = navigator.userAgent.toLowerCase();
                console.log(ua);
                // Chrome
                Notification.requestPermission().then(function(permission) {
                    if (permission == "granted") {
                        var notification = new Notification('授权信息', {
                            body: '您已授权浏览器使用通知功能',
                            icon: 'pic.jpg'
                        });
                        notification.onclick = function() {
                            notification.close();
                        };
                    } else {
                        Notification.requestPermission();
                        console.log('没有权限,用户拒绝:Notification');
                    }
                });
            } else {
                console.log('不支持Notification');
            }
        },
        send: function (title, body, icon, callback){
            var Notify = new Notification(title, {
                body: body,
                icon: icon
            });
            Notify.onclick = function() {
                // 执行回调函数
                callback();
                // window.open('http://www.baidu.com');
                console.log('回调函数执行成功');
                // 关闭连接
                Notify.close();
            };
        }
    }
    notify.init();
</script>
</html>